<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class SnapshotSandbox {
            constructor() {
                this.windowSnapshot = {};
                this.modifiedPropsMap = {};
            }
            active() {
                // 当激活的时候，给 window 拍个快照
                this.windowSnapshot = {}
                Object.keys(window).forEach(key => {
                    this.windowSnapshot[key] = window[key];
                })
                // 如果是重新调用  active 的时候，表示又一次激活，需要将保存的属性还原回来
                Object.keys(this.modifiedPropsMap).forEach(key => {
                    window[key] = this.modifiedPropsMap[key];
                })
            }
            inactive() {
                // 需要记录全局哪些属性被修改了
                this.modifiedPropsMap = {};
                // 如果失活，需要和快照的 window 进行对比，将变化的内容存入modifiedPropsMap
                Object.keys(window).forEach(key => {
                    if (window[key] !== this.windowSnapshot[key]) {
                        // 记录修改的属性
                        this.modifiedPropsMap[key] = window[key];
                        // 将 window 属性还原成最初样子
                        window[key] = this.windowSnapshot[key];
                    }
                })
            }
        }

        const sandbox = new SnapshotSandbox();
        sandbox.active();
        window.a = 100;
        window.b = 200;
        sandbox.inactive();
        console.log(window.a, window.b); // undefined undefinded
        sandbox.active();
        console.log(window.a, window.b); // 100 200
    </script>
</body>
</html>